<template>
  <div class="top-menu">
    <el-menu :default-active="activeIndex"
             mode="horizontal"
             text-color="#333"
             active-text-color="#409EFF">
      <template v-for="(item,index) in items">
        <el-menu-item v-if="validatenull(item[childrenKey]) && vaildRoles(item)" :index="item.parentId+''"
                      @click.native="openMenu(item)"
                      :key="index">
          <template slot="title">
            <i :class="item[iconKey]"></i>
            <span>{{item.label}}</span>
          </template>
        </el-menu-item>

        <el-submenu v-else-if="!validatenull(item[childrenKey])&&vaildRoles(item)"
                    :index="item[pathKey]"
                    :key="item[labelKey]">
          <template slot="title">
            <i :class="item[iconKey]"></i>
            <span slot="title">{{item[labelKey]}}</span>
          </template>
          <template v-for="(child,cindex) in item[childrenKey]">
            <el-menu-item :index="child[pathKey],cindex"
                          v-if="validatenull(child[childrenKey])"
                          @click.native="openMenu(child)"
                          :key="child[labelKey]">
              <i :class="child[iconKey]"></i>
              <span slot="title">{{child[labelKey]}}</span>
            </el-menu-item>
          </template>
        </el-submenu>

      </template>
    </el-menu>
  </div>
</template>

<script>
  import { validatenull } from "@/util/validate";
  import { mapGetters } from "vuex";
export default {
  name: "top-menu",
  inject: ["Index"],
  data() {
    return {
      activeIndex: "0",
      items: []
    };
  },
  computed: {
    ...mapGetters(["website"]),
    labelKey() {
      return this.website.menu.props.label;
    },
    pathKey() {
      return this.website.menu.props.path;
    },
    iconKey() {
      return this.website.menu.props.icon;
    },
    childrenKey() {
      return this.website.menu.props.children;
    },
    nowTagValue() {
      return this.$router.$avueRouter.getValue(this.$route);
    }
  },
  created() {
    this.getTopMenu()
  },
  methods: {
    openMenu(item) {
      this.$store.commit("DEL_ALL_TAG");
      this.$store.commit('CLICK_TOP_MENU', item.id)
      this.$store.commit('SET_APP_ID', item.appId?item.appId:this.website.appId)
      this.Index.openMenu(item);
      this.$router.push({
        path: "/"
      });
    },
    getTopMenu() {
      this.$store.dispatch("GetTopMenu").then(res => {
        this.items = res;
      });
    },

    vaildRoles(item) {
      item.meta = item.meta || {};
      return item.meta.roles ? item.meta.roles.includes(this.roles) : true;
    },
    validatenull(val) {
      return validatenull(val);
    },
  }
};
</script>

